<template>
    <div>
        <div class="table-data">
            <div class="search-box">
                <el-date-picker
                    v-model="dateTime"
                    type="datetimerange"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
                <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="handleSearch"
                    >搜索</el-button
                >
                <el-button
                    size="small"
                    type="warning"
                    @click="handlecashierCode"
                    >收银台二维码</el-button
                >
            </div>
            <el-table
                v-loading="loading"
                element-loading-text="正在加载"
                element-loading-spinner="el-icon-loading"
                :data="tableData"
                style="width: 100%"
                :height="tHeight"
                class="table-box"
            >
                <el-table-column label="id" prop="id"></el-table-column>
                <el-table-column label="支付人">
                    <template slot-scope="scope">
                        <div class="commodity-name">
                            <el-popover
                                placement="right"
                                title=""
                                trigger="hover"
                            >
                                <img
                                    :src="scope.row.wxuser.wx_avator"
                                    style="max-width: 300px; max-height: 300px"
                                />
                                <img
                                    slot="reference"
                                    class="commodity-image"
                                    :src="scope.row.wxuser.wx_avator"
                                    :alt="scope.row.wxuser.wx_avator"
                                />
                            </el-popover>
                            <p
                                style="
                                    width: 300px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                "
                            >
                                {{ scope.row.wxuser.wx_nickname }}
                            </p>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                    label="支付门店"
                    prop="store.name"
                ></el-table-column>
                <el-table-column
                    label="支付方式"
                    prop="uc_mobile"
                >储值支付</el-table-column>
                <el-table-column
                    label="支付金额"
                    prop="pay_amount"
                ></el-table-column>
                <el-table-column
                    label="支付人企业"
                    prop="company.name"
                ></el-table-column>
                <el-table-column
                        label="支付时间"
                        prop="create_at"
                ></el-table-column>
            </el-table>
            <div class="pages" ref="page-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 30, 50]"
                    :page-size="size"
                    layout="total,sizes,prev,pager,next,jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </div>

        <el-dialog
            title="收银台二维码"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <div class="demo-image__placeholder">
                <div class="block">
                    <el-image :src="src">
                    <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                    </div>
                    </el-image>
                </div>
</div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import shopApi from "@/api/business";
@Component({
    components: {},
})
export default class cashierList extends Vue {
    @Provide() dateTime: any = ["", ""]; // 时间
    @Provide() id: any = 0;
    @Provide() tHeight: number = document.body.offsetHeight - 323;
    @Provide() tableData: any = []; // 表格数据
    @Provide() allData: any = []; // 所以数据
    @Provide() multipleTable: any = []; // 表格数据
    @Provide() page: number = 1; // 当前page
    @Provide() size: number = 10; // 请求数据的个数 默认5
    @Provide() total: number = 0; // 总数据条数
    @Provide() loading: Boolean = true; // 是否显示加载图标
    @Provide() dialogVisible: Boolean = false;
    @Provide() src: string = '';
    @Provide() searchData: any = {
        pageNum: 1,
    };
    @Provide() searchMap: {
        begin_time: string;
        end_time: string;
    } = {
        begin_time: "",
        end_time: "",
    };

    created() {
        this.id = this.$route.query.id;
        this.loadData();
    }

    loadData() {
        shopApi
            .shopCashierList(this.page, this.size, this.searchMap)
            .then((res: any) => {
                this.tableData = res.data.data.list;
                this.total = res.data.data.total;
                this.loading = false;
            });
    }

    handleSizeChange(val: number): void {
        this.size = val;
        this.page = 1;
        this.loadData();
    }

    handleCurrentChange(val: number): void {
        this.page = val;
        this.loadData();
    }

    handleSearch(): void {
        // 点击搜索
        if (this.dateTime == null) {
            this.dateTime = ["", ""];
        }
        this.searchMap.begin_time = this.dateTime[0];
        this.searchMap.end_time = this.dateTime[1];
        this.page = 1;
        this.loadData();
    }

    handlecashierCode() {
        
        shopApi.shopCashierCode().then((res: any) => {
            const resp = res.data;
            if (resp.code !== 200) {
                this.$message.error(resp.msg);
                return false;
            }
            this.src = resp.data.url
            this.dialogVisible = true;
        });
    }

    closeCode () {
    (this.$refs.qrcCode as any).innerHTML = ''
    this.dialogVisible =false
  }
}
</script>

<style lang="scss">
.el-range-editor.el-input__inner {
    margin-right: 10px;
}
.el-table .cell {
    text-align: center !important;
}
.commodity-name {
    display: flex;
    flex-wrap: nowrap;
    padding: 6px;
    .commodity-image {
        width: 50px;
        height: 50px;
    }
    p {
        margin: auto 10px;
    }
}
.qrcode-box {
    text-align: center;
}
.qrcode {
    display: inline-block;
    width: 200px;
    height: 200px;
}
</style>
